<template>
  <div>
    <t-dialog
      header="创建场景话术"
      body="水平居中显示的对话框"
      :visible="isshow"
      @close="onReset"
      type="reset"
      :footer="false"
      width="800px"
      :style="{ height: '700px !important' }"
    >
      <dk-divider style="margin: 10px 0"></dk-divider>
      <t-form
        ref="form"
        :rules="FORM_RULES"
        :data="formData"
        :colon="true"
        reset-type="initial"
        @reset="onReset"
        @submit="onSubmit"
        scrollToFirstError="smooth"
      >
        <t-form-item label="模版名称" name="templatename">
          <t-input
            v-model="formData.templatename"
            placeholder="请输入模版名称"
            @enter="onEnter"
          ></t-input>
        </t-form-item>

        <t-form-item label="行业信息" name="Industrymsg">
          <t-select
            v-model="formData.Industrymsg"
            :options="IndustrymsgOptions"
            placeholder="请选择行业信息"
          >
          </t-select>
        </t-form-item>
        <t-form-item label="场景信息" name="Scenemsg">
          <t-select
            v-model="formData.Scenemsg"
            :options="ScenemsgOptions"
            placeholder="请选择场景信息"
          >
          </t-select>
        </t-form-item>
        <t-form-item label="场景信息" name="Description">
          <t-input v-model="formData.Description" placeholder="请选择场景信息">
          </t-input>
        </t-form-item>

        <t-form-item class="buttonbut">
          <t-space size="small">
            <t-button theme="default" variant="base" type="reset"
              >取消</t-button
            >
            <t-button theme="primary" type="submit">提交</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, reactive } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { getcreatetask } from "@/api/callOutTasks/index.js";
import {
  IndustrymsgOptions,
  ScenemsgOptions,
} from "../formcolumn/creatSceneWords";

const props = defineProps({
  // 默认选中的部门id
  isshow: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["event"]);

const formData = reactive({
  templatename: "", // 模版名称
  Industrymsg: "", // 行业信息
  Scenemsg: "", // 场景信息
  Description: "", // 描述
});

const form = ref(null);

const FORM_RULES = {
  templatename: [{ required: true, message: "请输入模版名称" }],
  Industrymsg: [{ required: true, message: "请选择行业信息" }],
  Scenemsg: [{ required: true, message: "请选择场景信息" }],
};
//取消
const onReset = () => {
    MessagePlugin.success("重置成功");
  form.value.reset();
  emit("event", false);
};
//提交
const onSubmit = async ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success("提交成功");
    // emit('event', false);
    console.log(formData);
    // const res = await getcreatetask(formData);
    // console.log(res);
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
  e.preventDefault();
};
</script>

<style lang="scss" scoped>
.buttonbut {
  display: flex;
  justify-content: space-between;
}
.outtimecla {
  display: flex;
  flex-direction: column;
  .outtimecla_item {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
}
</style>
